mg-page, mg-view, .mg-view, .mg-page {
    display: block;
    z-index: 10;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    position: relative;
    background-color: #FFFFFF;

    &.viewHide {
        display: none !important;
    }

    .transition-none {
        transition-duration: 0s;
    }

    .leave {
        opacity: 0;
        transform: translate(0);
    }

    .slideInRight, .slideInLeft,
    .slideOutRight, .slideOutLeft {
        top: 0;
        position: absolute;
    }

    .slideInRight {
        z-index: 80;
        display: block !important;
        animation-duration: 0.6s;
        animation-fill-mode: both;
        animation-name: slideInRight;
    }

    .slideInLeft {
        z-index: 80;
        display: block !important;
        animation-duration: 0.6s;
        animation-fill-mode: both;
        animation-name: slideInLeft;
    }

    .slideOutRight {
        animation-duration: 0.6s;
        animation-fill-mode: both;
        animation-name: slideOutRight;
    }

    .slideOutLeft {
        animation-duration: 0.6s;
        animation-fill-mode: both;
        animation-name: slideOutLeft;
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes slideOutRight {
        from {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        to {
            opacity: 0;
            transform: translate3d(100%, 0, 0);
        }
    }

    @keyframes slideOutLeft {
        from {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        to {
            opacity: 0;
            transform: translate3d(-100%, 0, 0);
        }
    }

    .pop-new {
        z-index: 100;
        opacity: 0;
        transform: translateX(-100%);

        &.enter {
            opacity: 1;
            transform: translateX(0) !important;
        }
    }

    ._load_ {
        z-index: 100;
        background-color: #fff;

        .tip {
            display: block;
            position: absolute;
            top: 42%; left: 50%;
            transform: translate(-50%, -50%);
            background-size: 10% 10%;
            width: 10%;
            height: 10%;
        }
    }
}
